<%--
  Created by IntelliJ IDEA.
  User: xuyulin
  Date: 28/8/17
  Time: 下午11:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="${resourcesPath}/resources/oa/css/screen.css" type="text/css" media="screen" title="default" />
    <!--[if IE]>
    <link rel="stylesheet" media="all" type="text/css" href="${resourcesPath}/resources/oa/css/pro_dropline_ie.css" />
    <![endif]-->

    <!--  jquery core -->
    <script src="${resourcesPath}/resources/oa/js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>

    <!--  checkbox styling script -->
    <script src="${resourcesPath}/resources/oa/js/jquery/ui.core.js" type="text/javascript"></script>
    <script src="${resourcesPath}/resources/oa/js/jquery/ui.checkbox.js" type="text/javascript"></script>
    <script src="${resourcesPath}/resources/oa/js/jquery/jquery.bind.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $('input').checkBox();
            $('#toggle-all').click(function(){
                $('#toggle-all').toggleClass('toggle-checked');
                $('#mainform input[type=checkbox]').checkBox('toggle');
                return false;
            });
        });
    </script>


    <![if !IE 7]>

    <!--  styled select box script version 1 -->
    <script src="${resourcesPath}/resources/oa/js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.styledselect').selectbox({ inputClass: "selectbox_styled" });
        });
    </script>


    <![endif]>


    <!--  styled select box script version 2 -->
    <script src="${resourcesPath}/resources/oa/js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" });
            $('.styledselect_form_2').selectbox({ inputClass: "styledselect_form_2" });
        });
    </script>

    <!--  styled select box script version 3 -->
    <script src="${resourcesPath}/resources/oa/js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" });
        });
    </script>

    <!--  styled file upload script -->
    <script src="${resourcesPath}/resources/oa/js/jquery/jquery.filestyle.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        $(function() {
            $("input.file_1").filestyle({
                image: "${resourcesPath}/resources/oa/images/forms/upload_file.gif",
                imageheight : 29,
                imagewidth : 78,
                width : 300
            });
        });
    </script>

    <!-- Custom jquery scripts -->
    <script src="${resourcesPath}/resources/oa/js/jquery/custom_jquery.js" type="text/javascript"></script>

    <!-- Tooltips -->
    <script src="${resourcesPath}/resources/oa/js/jquery/jquery.tooltip.js" type="text/javascript"></script>
    <script src="${resourcesPath}/resources/oa/js/jquery/jquery.dimensions.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('a.info-tooltip ').tooltip({
                track: true,
                delay: 0,
                fixPNG: true,
                showURL: false,
                showBody: " - ",
                top: -35,
                left: 5
            });
        });
    </script>

    <!--  date picker script -->
    <link rel="stylesheet" href="${resourcesPath}/resources/oa/css/datePicker.css" type="text/css" />
    <script src="${resourcesPath}/resources/oa/js/jquery/date.js" type="text/javascript"></script>
    <script src="${resourcesPath}/resources/oa/js/jquery/jquery.datePicker.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        $(function()
        {

// initialise the "Select date" link
            $('#date-pick')
                .datePicker(
                    // associate the link with a date picker
                    {
                        createButton:false,
                        startDate:'01/01/2005',
                        endDate:'31/12/2020'
                    }
                ).bind(
                // when the link is clicked display the date picker
                'click',
                function()
                {
                    updateSelects($(this).dpGetSelected()[0]);
                    $(this).dpDisplay();
                    return false;
                }
            ).bind(
                // when a date is selected update the SELECTs
                'dateSelected',
                function(e, selectedDate, $td, state)
                {
                    updateSelects(selectedDate);
                }
            ).bind(
                'dpClosed',
                function(e, selected)
                {
                    updateSelects(selected[0]);
                }
            );

            var updateSelects = function (selectedDate)
            {
                var selectedDate = new Date(selectedDate);
                $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
                $('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
                $('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
            }
// listen for when the selects are changed and update the picker
            $('#d, #m, #y')
                .bind(
                    'change',
                    function()
                    {
                        var d = new Date(
                            $('#y').val(),
                            $('#m').val()-1,
                            $('#d').val()
                        );
                        $('#date-pick').dpSetSelected(d.asString());
                    }
                );

// default the position of the selects to today
            var today = new Date();
            updateSelects(today.getTime());

// and update the datePicker to reflect it...
            $('#d').trigger('change');
        });
    </script>

    <!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
    <script src="${resourcesPath}/resources/oa/js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(document).pngFix( );
        });
    </script>

    <script>

        function chk_field(fname,ftext) {
            val = fname.value;
            if (val.length == 0) {
                alert(ftext + ' is a required field. Please enter a value');
                fname.focus();
                return false;
            }
            else {
                return true;
            }
        }
        /*
         function radiohead (obj,index) {
         el = eval('el'+index);
         if (obj.checked) {
         for (i = 0; i < el.length; i++) {
         if (obj.name != el[i]) {
         document.getElementById(el[i]).checked = false;
         }
         }
         }
         }
         */
        function toggle(s,compare,source,target) {
            src = document.getElementById(source);
            tgt = document.getElementById(target);
            if (src) {
                if (s == 'E') {
                    // enable/disable
                    if (src.checked == compare) {
                        tgt.disabled = false;
                    }
                    else {
                        tgt.disabled = true;
                    }
                }
            }
        }
        function goback() {
            document.forms["form1"].go_back.value = "1";
            document.forms["form1"].submit();
        }


    </script>

    <title>Steins-Garrett Global Solutions : Online Account Registration</title>
</head>
<body>
<!-- Start: page-top-outer -->
<div id="page-top-outer">
    <!-- Start: page-top -->
    <div id="page-top">
        <!-- start logo -->
        <div id="logo">
            <a href=""><img src="${resourcesPath}/resources/oa/images/shared/logo.png" alt="" /></a>
        </div>
        <!-- end logo -->
    </div>
    <div class="clear"></div>
</div>
<!-- End: page-top -->
<div class="clear"></div>
<!-- start content-outer -->
<div id="content-outer">
    <div id="content">

        <div id="page-heading"><h1>Steins-Garrett Global Solutions Online Account Application</h1></div>

        <table border="0" width="1140px" cellpadding="0" cellspacing="0" id="content-table">
            <tr>
                <th rowspan="3" class="sized"><img src="${resourcesPath}/resources/oa/images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
                <th class="topleft"></th>
                <td id="tbl-border-top">&nbsp;</td>
                <th class="topright"></th>
                <th rowspan="3" class="sized"><img src="${resourcesPath}/resources/oa/images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
            </tr>
            <tr>
                <td id="tbl-border-left"></td>
                <td>
                    <!--  start content-table-inner -->
                    <div id="content-table-inner">

                        <table border="0" width="100%" cellpadding="0" cellspacing="0">
                            <tr valign="top">
                                <td>
                                    <form action="?step=5" method="post" name="frm_det" id="frm_det">
                                        <input type="hidden" value="4" name="step" id="step">
                                        <input type="hidden" value="" name="go_back" id="go_back">
                                        <!--  start step-holder -->
                                        <div id="message-red">
                                            <table border="0" width="100%" cellpadding="0" cellspacing="0">
                                                <tbody><tr>
                                                    <td class="red-left"><p>The questions on the following pages are required. Please provide accurate  information. Providing inaccurate or incomplete information will delay or  prevent the opening of your account. Please note that in order for your information to be saved, you must continue  through until the status menu at the upper right of the window indicates the  process is complete. </p></td>
                                                    <td class="red-right"><a class="close-red"><img src="${resourcesPath}/resources/oa/images/table/icon_close_red.gif" alt=""></a></td>
                                                </tr>
                                                </tbody></table>
                                        </div>

                                        <!--  start step-holder -->
                                        <div id="step-holder">
                                            <div class="step-no-off">1</div>
                                            <div class="step-light-left">Account Type</div>
                                            <div class="step-light-right">&nbsp;</div>
                                            <div class="step-no-off">2</div>
                                            <div class="step-light-left">Account Details</div>
                                            <div class="step-light-right">&nbsp;</div>
                                            <div class="step-no-off">3</div>
                                            <div class="step-light-left">Account Maintenance</div>
                                            <div class="step-light-right">&nbsp;</div>
                                            <div class="step-no">4</div>
                                            <div class="step-dark-left">Investment Profile</div>
                                            <div class="step-dark-right">&nbsp;</div>
                                            <div class="step-no-off">5</div>
                                            <div class="step-light-left">Financial Activities</div>
                                            <div class="step-light-right">&nbsp;</div>
                                            <div class="step-no-off">6</div>
                                            <div class="step-light-left">Legal Notices</div>
                                            <div class="step-light-right">&nbsp;</div>
                                            <div class="step-no-off">7</div>
                                            <div class="step-light-left">Print Form</div>
                                            <div class="step-light-round">&nbsp;</div>
                                            <div class="clear"></div>
                                        </div>

                                        <!--  end step-holder -->		<!--  end step-holder -->


                                        <!-- start id-form -->
                                        <div style="padding-left:30px"><script>
                                            function chk_form() {
                                                document.frm_det.submit();
                                            }
                                        </script>
                                            <h1>Investment Profile</h1>
                                            <p>&nbsp;</p>
                                            <p>Securities industry regulations require that we collect all of the following information. For joint accounts please include combined amounts.</p>
                                            <p>&nbsp;</p>
                                            <p>&nbsp;</p>
                                            <p><strong>Investment Objective for this account </strong>(choose only one)</p>
                                            <p>&nbsp;</p>
                                            <table width="493" border="0" id="id-form">
                                                <tbody><tr>
                                                    <td width="4%" style="vertical-align:top"><input name="objective1" type="radio" value="Capital Preservation" class="ui-helper-hidden-accessible"></td>
                                                    <td width="40%"><strong>Capital Preservation</strong><br>
                                                        <em>Minimize the potential for any loss of principal</em></td>
                                                    <td width="4%" style="vertical-align:top"><input type="radio" name="objective1" value="Income" class="ui-helper-hidden-accessible"></td>
                                                    <td width="48%"><strong>Income</strong><br>
                                                        <em>Provide current income rather than growth of principal</em></td>
                                                </tr>
                                                <tr>
                                                    <td style="vertical-align:top"><input type="radio" name="objective1" value="Growth" class="ui-helper-hidden-accessible"></td>
                                                    <td><strong>Growth</strong><br>
                                                        <em>Increase investment value over time while accepting fluctuations</em></td>
                                                    <td style="vertical-align:top"><input type="radio" name="objective1" value="Speculation" class="ui-helper-hidden-accessible"></td>
                                                    <td><strong>Speculation</strong><br>
                                                        <em>Assume the highest degree of risk for potentially higher returns.</em></td>
                                                </tr>
                                                </tbody></table>
                                            <p>&nbsp;</p>
                                            <p>&nbsp;</p>
                                            <p><strong>Investment Experience</strong></p>
                                            <p>&nbsp;</p>
                                            <table width="493" border="0" id="id-form">
                                                <tbody><tr>
                                                    <td width="4%"><input name="experience1" type="radio" value="None" class="ui-helper-hidden-accessible"></td>
                                                    <td width="41%">None</td>
                                                    <td width="4%"><input type="radio" name="experience1" value="Limited" class="ui-helper-hidden-accessible"></td>
                                                    <td width="47%">Limited</td>
                                                </tr>
                                                <tr>
                                                    <td><input type="radio" name="experience1" value="Good" class="ui-helper-hidden-accessible"></td>
                                                    <td>Good</td>
                                                    <td><input type="radio" name="experience1" value="Excellent" class="ui-helper-hidden-accessible"></td>
                                                    <td>Excellent</td>
                                                </tr>
                                                </tbody></table>
                                            <p>&nbsp;</p>
                                            <p>&nbsp;</p>
                                            <p><strong>Annual Income</strong></p>
                                            <p>&nbsp;</p>
                                            <table width="493" border="0" id="id-form">
                                                <tbody><tr>
                                                    <td width="4%"><input name="annual1" type="radio" value="$0 - $14,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$0 - $14,999</td>
                                                    <td width="4%"><input type="radio" name="annual1" value="$50,000 - $99,000" class="ui-helper-hidden-accessible"></td>
                                                    <td>$50,000 - $99,000</td>
                                                </tr>
                                                <tr>
                                                    <td><input type="radio" name="annual1" value="$15,000 - $24,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$15,000 - $24,999</td>
                                                    <td><input type="radio" name="annual1" value="$100,000 - $199,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$100,000 - $199,999</td>
                                                </tr>
                                                <tr>
                                                    <td><input type="radio" name="annual1" value="$25,000 - $49,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$25,000 - $49,999</td>
                                                    <td><input type="radio" name="annual1" value="$200,000 +" class="ui-helper-hidden-accessible"></td>
                                                    <td>$200,000 + </td>
                                                </tr>
                                                </tbody></table>
                                            <p>&nbsp;</p>
                                            <p>&nbsp;</p>
                                            <p><span class="label"><strong>Approximate Net Worth </strong>(excluding residence) </span></p>
                                            <p>&nbsp;</p>
                                            <table width="493" border="0" id="id-form">
                                                <tbody><tr>
                                                    <td width="4%"><input name="networth1" type="radio" value="$0 - $24,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$0 - $24,999</td>
                                                    <td width="4%"><input type="radio" name="networth1" value="$100,000 - $499,000" class="ui-helper-hidden-accessible"></td>
                                                    <td>$100,000 - $499,000</td>
                                                </tr>
                                                <tr>
                                                    <td><input type="radio" name="networth1" value="$25,000 - $49,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$25,000 - $49,999</td>
                                                    <td><input type="radio" name="networth1" value="$500,000 - $999,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$500,000 - $999,999</td>
                                                </tr>
                                                <tr>
                                                    <td><input type="radio" name="networth1" value="$50,000 - $99,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$50,000 - $99,999</td>
                                                    <td><input type="radio" name="networth1" value="$1,000,000 +" class="ui-helper-hidden-accessible"></td>
                                                    <td>$1,000,000 + </td>
                                                </tr>
                                                </tbody></table>
                                            <p>&nbsp;</p>
                                            <p>&nbsp;</p>
                                            <p><span class="label"><strong>Approximate Liquid Net Worth </strong>(cash, stocks, etc.) </span></p>
                                            <p>&nbsp;</p>
                                            <table width="493" border="0" id="id-form">
                                                <tbody><tr>
                                                    <td width="4%"><input name="liquid1" type="radio" value="$0 - $14,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$0 - $14,999</td>
                                                    <td width="4%"><input type="radio" name="liquid1" value="$100,000 - $199,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$100,000 - $199,999</td>
                                                </tr>
                                                <tr>
                                                    <td><input type="radio" name="liquid1" value="$15,000 - $24,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$15,000 - $24,999</td>
                                                    <td><input type="radio" name="liquid1" value="$200,000 - $499,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$200,000 - $499,999</td>
                                                </tr>
                                                <tr>
                                                    <td><input type="radio" name="liquid1" value="$25,000 - $49,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$25,000 - $49,999</td>
                                                    <td><input type="radio" name="liquid1" value="$500,000 - $999,999" class="ui-helper-hidden-accessible"></td>
                                                    <td>$500,000 - $999,999</td>
                                                </tr>
                                                <tr>
                                                    <td><input type="radio" name="liquid1" value="$50,000 - $99,000" class="ui-helper-hidden-accessible"></td>
                                                    <td>$50,000 - $99,000</td>
                                                    <td><input type="radio" name="liquid1" value="$1,000,000 +" class="ui-helper-hidden-accessible"></td>
                                                    <td>$1,000,000 + </td>
                                                </tr>
                                                </tbody></table>
                                            <p>&nbsp;</p>
                                            <input name="nxt" type="button" onclick="window.location='?step=3'" value=" << Back to Previous" class="form-reset" style="margin-right:10px"> <input name="nxt" type="button" onclick="chk_form()" value=" Click to Continue >>" class="form-submit"> </div>

                                        <!-- end id-form  -->
                                    </form>

                                </td>
                                <td>


                                </td>
                            </tr>
                            <tr>
                                <td><img src="${resourcesPath}/resources/oa/images/shared/blank.gif" width="695" height="1" alt="blank" /></td>
                                <td></td>
                            </tr>
                        </table>

                        <div class="clear"></div>


                    </div>
                    <!--  end content-table-inner  -->
                </td>
                <td id="tbl-border-right"></td>
            </tr>
            <tr>
                <th class="sized bottomleft"></th>
                <td id="tbl-border-bottom">&nbsp;</td>
                <th class="sized bottomright"></th>
            </tr>
        </table>


        <div class="clear">&nbsp;</div>

    </div>
    <!--  end content -->
    <div class="clear">&nbsp;</div>
</div>
<!--  end content-outer -->

<div class="clear">&nbsp;</div>
<!-- start footer -->
<div id="footer">
    <!--  start footer-left -->
    <div id="footer-left">&copy; Copyright 2017. Steins-Garrett Global Solutions Online Account Application (<a href="http://www.steinsggs.com">www.steinsggs.com)</a>. All Rights Reserved.
    </div>
    <!--  end footer-left -->
    <div class="clear">&nbsp;</div>
</div>
<!-- end footer --></body>
</html>